<template>
  <div style="display: flex">
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>
          <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
            <svg-icon class="primary" :icon-class="$route.meta.icon"/>
            <span style="margin-left: 5px;" class="primary">{{ $route.meta.title }}</span>
          </div>
          <div class="report_header_left"></div>
          <div class="report_header_query">
            <querySupplier @querySupplier="querySupplier" :supplierName="query.supplierName"></querySupplier>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">
              <div class="report_header_query">
                <el-input prefix-icon="el-icon-search" placeholder="请输入客户经理名称" v-model="keyword" clearable></el-input>
              </div>
              <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary"
                         v-permission="['customerManager.query']" @click="queryClick">查询
              </el-button>
              <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary"
                         v-permission="['customerManager.add']" @click="addClick">新增
              </el-button>
            </div>
          </div>
        </div>
      </el-header>
      <div class="pd10">
        <el-table :data="managerList"  :v-show="$loading"  border stripe :height="curHeight"
          v-loadMore="[payLoads,'company-list-table']"
          ref="table"
          style="width: 100%;">
          <el-table-column label="序号" type="index" width="50"  align="center"></el-table-column>
          <el-table-column label="客户经理名称" prop="name" align="center" width="120"></el-table-column>
          <el-table-column label="联系电话" prop="phone" align="center"  width="120"></el-table-column>
          <el-table-column label="供应商" prop="customerName" align="center" width="120"></el-table-column>
          <el-table-column label="审核说明" prop="msg"></el-table-column>
          <el-table-column
            label="状态"
            prop="status"
            width="80"
            align="center">
            <template slot-scope="scope">
                <el-tag :type="scope.row.status === 0 ?  'info' : (scope.row.status === 1 ? 'success' : 'warning')">
                  <span>{{ scope.row.status | manager }}</span>
                </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createDate" align="center" width="200">
            <template slot-scope="scope">
                  <span>{{ scope.row.createDate | formatDate2Time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="修改时间" prop="modifyDate" align="center" width="200">
            <template slot-scope="scope">
                  <span>{{ scope.row.modifyDate | formatDate2Time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="功能" fixed="right" align="center" width="80">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="查看详情" v-permission="['customerManager.detail']"
                          placement="top-start">
                <el-button @click="detailClick(scope.row)" type="primary" size="mini"
                >详情
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="80">
            <template slot-scope="scope">
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  v-permission="['customerManager.edit']"
                  content="修改客户经理"
                  v-show="deleted == false"
                  placement="top-start"
                >
                  <a @click="editClick(scope.row)">
                    <i style="color: #409EFF" class="el-icon-edit"></i>
                  </a>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  v-permission="['customerManager.del']"
                  content="删除客户经理"
                  v-show="deleted == false"
                  placement="top-start"
                >
                  <a style="margin-left: 10px" @click="del(scope.row)">
                    <i style="color: #F56C6C" class="el-icon-delete"></i>
                  </a>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="loadOrder"
        ></pagination>
      </el-footer>
    </el-container>

  </div>
</template>
<style scoped>
</style>

<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import {list, del, update} from "@/api/manager";
import {list as companyList} from "@/api/company"
import {list as customerList} from "@/api/customer"
import {EventBus} from "@/api/eventBus";
import Pagination from "@/components/Pagination";
import loadMore from "@/utils/loadMore.js";
import utils from "@/utils/utils";
import queryCompany from "@/components/Query/queryCompany";
import queryCustomer from "@/components/Query/queryCustomer";
import querySupplier from "@/components/Query/querySupplier";

export default {
  name: "customerManager-list",
  directives: {permission, loadMore},
  data() {
    return {
      managerList: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      queryType: true,
      query: {

        companyId: '',
        companyName: "",

        customerId: '',
        customerName: "",

        supplierId: '',
        supplierName: "",

      },
      keyword: "",
      curHeight: null,
      deleted: false,
      payLoads: '',
    }
  },
  components: {
    Pagination,
    queryCompany,
    queryCustomer,
    querySupplier,
    // queryStatus,
  },
  created() {
    this.loadOrder();
    EventBus.$on("customerManager-add", res => {
      this.managerList.splice(0, 0, res);
    });

    EventBus.$on("customerManager-edit", res => {
      for (var i = 0; i < this.managerList.length; i++) {
        if (this.managerList[i].id == res.id) {
          this.$set(this.managerList, i, res)
        }
      }
    });
  },
  activated() {
    this.payLoads = new Date().getTime();
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },
    formatDate2Time(val) {
      if (val) {
        let date = new Date(val);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
      } else {
        return ""
      }
    },
    manager(val){
      if (val == 0) {
        return '待审核'
      } else if (val == 1) {
        return '已审核'
      } else if (val == 2) {
        return '已驳回'
      }
    }
  },
  watch: { // 路由地址不变的情况下,如果id变化则重新获取数据
    status(newVal, oldVal) {
      this.form.status = newVal;
    },
  },
  methods: {

    loadOrder() {
      var _this = this;
      let params = new URLSearchParams();
      params.append("pageNum", _this.pageNum);
      params.append("pageSize", _this.pageSize);
      params.append("companyId", _this.query.companyId);
      params.append("keyword", _this.keyword);
      params.append("deleted", _this.deleted);
      if (_this.query.supplierId != null) {
        params.append('customerId', _this.query.supplierId)
      }
      list(params).then(response => {
        console.info(response,"list")
        let list = response.data.data;
        this.managerList = _this.formatList(list);
        _this.total = response.data.total;
        this.updateScroll();
      })
    },


    chooseClick() {
      this.queryType = !this.queryType;
      if (this.queryType == false) {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 266; //减去页面上固定高度height
      } else {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220; //减去页面上固定高度height
      }
    },

    queryClick() {
      this.pageNum = 1;
      this.loadOrder();
    },
    querySupplier(item) {
      console.log("选择1", item)
      this.query.supplierId = item.id
      this.query.supplierName = item.name
      console.log("选择供应商", this.query.supplierName)
    },
    queryCustomerClick(item) {
      console.log("选择2", item)
      this.query.customerId = item.id
      this.query.customerName = item.name
      this.customerId = this.query.customerId
      console.log("选择采购商", this.query.customerName)
    },
    queryCompanyClick(item) {
      console.log("选择3", item)
      this.query.companyId = item.companyId
      this.query.companyName = item.name
      this.form.companyName = this.query.companyName
      console.log("选择所属公司", item, this.query.companyName)
    },
    resetClick() {
      this.query.customerId = '';
      this.query.customerName = "";
      this.query.companyId = '';
      this.query.companyName = "";
      this.query.Status = '';
      this.keyword = "";
      this.pageNum = 1;
      this.loadOrder();
    },

    //详情
    detailClick(row) {
      this.$router.push({
        path: "/customerManager/detail",
        query: {id: row.id}
      });
    },
    addClick() {
      this.$router.push({
        path: "/customerManager/add",
      });
    },
    //编辑订单
    editClick(row) {
      this.$router.push({
        path: "/customerManager/edit",
        query: {id: row.id}
      });
    },

    del(data) {
      console.log("data" + JSON.stringify(data));
      var _this = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          del(data.id)
            .then(response => {
              _this.managerList.forEach(function (item, index) {
                if (item.id === data.id) {
                  _this.managerList.splice(index, 1);
                }
              });
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
            })
            .catch(error => {
              console.log("error!!");
            });
        })
        .catch(() => {
        });
    },

    beforeMount() {
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            this.curHeight = h - 266; //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            this.curHeight = h - 220; //减去页面上固定高度height
          }
        })();
      };
    },
    comeIn() {
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 220; //减去页面上固定高度height
    },
    formatDate2Day(val) {
      if (val) {
        let date = new Date(val);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        return y + "-" + MM + "-" + d;
      } else {
        return ""
      }
    },
    formatDate2Time(val) {
      if (val) {
        let date = new Date(val);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
      } else {
        return ""
      }
    },
    //过滤企业列表
    formatList(data) {
      if (data.length > 0) {
        data.map(item => {
          item.createDate = this.formatDate2Day(item.createDate);
          item.modifyDate = this.formatDate2Time(item.modifyDate);
          item.rechangeDate = this.formatDate2Time(item.rechangeDate);
        });
      }
      return data;
    },
    updateScroll() {
      window.sessionStorage.setItem("loadTopcompany-list-table", 0);
      window.sessionStorage.setItem("loadLeftcompany-list-table", 0);
    }
  }
};
</script>

<style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #f2f2f2;
}

/deep/ .el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}

.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  flex-direction: row;
}

.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}
</style>
